<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mathematics</title>
<script src="modernizr.js"></script>
<script src="Debugger.js"></script>
</head>
<body>
	<div style="position: absolute; left: 50px; top: 50px;">
		<canvas id="canvas" width="500" height ="500">
			Your browser does not support canvas!
		</canvas>
	</div>
<script>
	
	function eventWindowLoaded() {
		canvasApp();
	}
	window.addEventListener("load", eventWindowLoaded, false);

    function canvasSupport() {
		return Modernizr.canvas;
	}

    function canvasApp() {

		if (!canvasSupport()) {
			return;
		}

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        var numBalls = 1000;
        var maxSize = 8;
        var minSize = 5;
        var maxSpeed = maxSize + 5;
        var balls = new Array();
        var radian = Math.PI / 180;
        var tempBall;
        var tempX;
        var tempY;
        var tempSpeed;
        var tempAngle;
        var tempRadius;
        var tempRadians;
        var tempXunits;
        var tempYunits;

        for (var i =0; i < numBalls; i++) {
            tempRadius = Math.floor(Math.random() * maxSize) + minSize;
            tempX = tempRadius * 2 + (Math.floor(Math.random() * canvas.width) - tempRadius * 2)
            tempY = tempRadius * 2 + (Math.floor(Math.random() * canvas.height) - tempRadius * 2)
            tempSpeed = maxSpeed - tempRadius;
            tempAngle = Math.floor(Math.random() * 360);
            tempRadians = tempAngle * Math.PI / 180;
            tempXunits = Math.cos(tempRadians) * tempSpeed;
            tempYunits = Math.sin(tempRadians) * tempSpeed;

            tempBall = {x:tempX, y:tempY, radius:tempRadius, speed:tempSpeed, angle:tempAngle,
                    xunits:tempXunits, yunits:tempYunits};
            balls.push(tempBall);
        }

        function drawScreen() {

            ctx.fillStyle = "#EEEEEE";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            ctx.strokeStyle = "#000000";
            //canvas.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
            for (var i = 0; i , balls.length; i++) {
                var ball = balls[i];
                ball.x += ball.xunits;
                ball.y += ball.yunits;

                ctx.fillStyle = "#000000";
                ctx.beginPath();
                ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fill();

                if (ball.x > canvas.width - ball.radius || ball.x < ball.radius) {
                    ball.angle = 180 - ball.angle;
                    updateBall(ball);
                } else if (ball.y > canvas.height - ball.radius || ball.y < ball.radius) {
                    ball.angle = 360 - ball.angle;
                    updateBall(ball);
                }
            }
        }

        function updateBall(ball) {
            ball.radians = ball.angle * radian;
            ball.xunits = Math.cos(ball.radians) * ball.speed;
            ball.yunits = Math.sin(ball.radians) *ball.speed;
        }

        setInterval(drawScreen, 33);
	}

	
	
</script>
</body>
</html>